$(function () {
  // 调用一个方法获取文章列表数据
  getArticleList()
  // 定义一个弹出框索引变量
  var layerIndex = null
  // 绑定添加文章类别事件
  $('#article-add').on('click', function () {
    // 1. 弹出框
    // 1.1 获取模板引擎中定义的弹出框字符串
    var articleAddStr = template('article-cat-tpl', {cat: 'add'})
    // var articleAddStr = $('#article-add-tpl').html()
    layerIndex = layer.open({
      title: '添加文章分类',
      type: 1,
      // content: '<h2>可以填写任意的layer代码</h2>'
      content: articleAddStr,
      area: ['500px', '300px']
    });
    // 2. 获取弹出框中信息
    // 3. 将添信息发送给服务器
  })

  // 给编辑按钮添加点击事件
  $('body').on('click', '#article-edit', function () {
     // 1. 获取id
     var id = this.dataset.id
     // 2. 根据id获取文章的类别信息
     $.ajax({
       url: '/my/article/cates/' + id,
       method: 'get',
       success: function (data) {
         console.log(data)
         if (data.status !== 0) return layer.msg('获取文章列表失败')
          // 3. 将信息展示到弹出框中
          var tplObj = data.data // { "Id": 1, "name": "最新", "alias": "ZuiXin"}
          tplObj.cat = 'edit'
          var articleAddStr = template('article-cat-tpl', tplObj)
          // var articleAddStr = $('#article-add-tpl').html()
          layerIndex = layer.open({
            title: '编辑文章分类',
            type: 1,
            // content: '<h2>可以填写任意的layer代码</h2>'
            content: articleAddStr,
            area: ['500px', '300px']
          });
       }
     })
    
  })

  // 监听弹出框中的form表单的提交事件
  // 主要我们的这个表单是后来添加的 
  // 所以页面初次渲染完毕后没有这个元素的
  // 所以这里要使用事件委托
  $('body').on('submit', '.layui-form-article', function (e) {
    e.preventDefault();
    var params = form.val("formArticle")
    // 编辑和添加不同的  1. 参数 添加没哟id 编辑有id   2. 请求url不同
    // console.log(params)
    // 判断如果有id说明是编辑操作 如果没有id说明是添加
    var url = '/my/article/addcates'
    if (params.Id) url = '/my/article/updatecate'
    // 发送ajax请求
    $.ajax({
      // url: url, // ES6中对象的属性简写 如果key的名字和value的名字一致可以写为如下这种
      url,
      method: 'post',
      data: params,
      success: function (data) {
        console.log(data)
        layer.msg(data.message)
        layer.close(layerIndex)
        if (data.status !== 0) return 
        // 这里开始是成功的业务处理逻辑
        // 重新获取文章分类数据
        getArticleList()
      }
    })
  })
  // 给删除按钮绑定点击事件 也要通过事件委托
  $('body').on('click', '#article-delete', function () {
    // console.log(99999)
    // 1. 获取要删除的id
    // console.log($(this))
    // var id = $(this).attr('data-id')
    // var id = $(this).data('id')
    // this是js对象 $(this)jQuery对象
    // var id = this.getAttribute('data-id')
    var id = this.dataset.id
    // console.log(id)
    // 2. 发送ajax请求删除
    $.ajax({
      url: '/my/article/deletecate/' + id,
      method: 'get',
      success: function (data) {
        if (data.status !== 0) return layer.msg('删除文章列表失败')
        // 这里开始是成功的业务处理逻辑
        getArticleList()
      }
    })
  })

})
var {layer, form} = layui
// 定义一个获取用户列表的方法
function getArticleList () {
  $.ajax({
    url: '/my/article/cates',
    success: function (data) {
      if (data.status !== 0) return layer.msg('获取文章列表失败')
      // 这里开始是成功的业务处理逻辑
      layer.msg('获取文章列表成功')
      // 1. 定义一个模板
      // 2. 通过模板引擎将数据生成html字符串
      // var listStr = template('article-list', {yy: [1, 2, 3]})
      var listStr = template('article-list-tpl', data) // template('article-list', {status: 0, message: '', data: []})
      // console.log(listStr)
      // 3. 将生成好的字符串追加到页面中去
      $('#article-list').html(listStr)
    }
  })
}
